<script lang="ts" setup>
import type { UploadChangeParam } from 'ant-design-vue';

import { computed, ref } from 'vue';

import { MdiAdd, MdiClose } from '@vben/icons';

import { Button, Image, message, Modal, Spin, Upload } from 'ant-design-vue';

import { addInvoice } from '#/api';
import { accept, headers, upApi } from '#/config/uploadConfig';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:show', 'initList']);

const showModal = computed({
  get() {
    return props.show;
  },
  set(newValue) {
    emit('update:show', newValue);
  },
});

// 发票图片
const imagesrc = ref<string>('');
// 未上传的错误状态
const errorStart = ref<string>('');
// 加载
const confirmLoading = ref(false);
// 是否显示图片加载动画
const showImageLoading = ref(false);

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    showImageLoading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    showImageLoading.value = false;
    const imgUrl = info.file?.response?.data?.url || '';
    imagesrc.value = imgUrl;
    errorStart.value = '';
  } else if (info.file.status === 'error') {
    showImageLoading.value = false;
    message.error(`${info.file.name} file upload failed.`);
  }
};

// 确认事件
const handleOk = async () => {
  if (!imagesrc.value) {
    errorStart.value = 'err';
    return;
  }
  confirmLoading.value = true;
  try {
    await addInvoice({
      id: props.data.id,
      invoiceUrl: imagesrc.value,
    });
    message.success('操作成功');
    confirmLoading.value = false;
    showModal.value = false;
    emit('initList');
  } catch (error) {
    confirmLoading.value = false;
    console.error('驳回失败：', error);
  }
};
</script>
<template>
  <div>
    <Modal
      v-model:open="showModal"
      :confirm-loading="confirmLoading"
      title="上传发票图片"
      @ok="handleOk"
    >
      <div>
        <div
          v-if="imagesrc"
          :style="{ backgroundImage: `url(${imagesrc})` }"
          class="image-list relative my-1.5 mr-3 overflow-hidden rounded-md bg-gray-100 bg-contain bg-center bg-no-repeat"
        >
          <MdiClose
            class="absolute right-0 top-0 z-[50] cursor-pointer text-xl text-gray-600"
            @click="() => (imagesrc = '')"
          />
          <Image
            :preview="true"
            :src="imagesrc"
            class="h-full w-full opacity-0"
          />
        </div>
        <div
          v-if="!imagesrc"
          class="image-list hover:border-primary-500 hover:text-primary-500 absolute relative left-0 top-0 z-[20] my-1.5 mr-3 flex h-full w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-gray-400"
        >
          <MdiAdd class="text-2xl" />
          <span class="text-base">点击上传</span>
          <Upload
            :accept="accept"
            :action="upApi"
            :headers="headers"
            :show-upload-list="false"
            class="absolute left-0 top-0 z-[50] h-full w-full opacity-0"
            name="file"
            @change="handleChange"
          >
            <Button class="absolute left-0 top-0 h-full w-full">上传</Button>
          </Upload>
          <template v-if="showImageLoading">
            <Spin
              class="absolute left-0 top-0 z-[50] flex h-full w-full flex-col items-center justify-center bg-white"
              tip="上传中..."
            />
          </template>
        </div>
        <div v-if="errorStart" class="text-red-500">请上传发票图片</div>
        <div class="mt-1 opacity-60">支持上传的发票图片格式：{{ accept }}</div>
      </div>
    </Modal>
  </div>
</template>
<style scoped lang="scss">
.image-list {
  width: 148px;
  height: 148px;
}

:deep(.ant-image .ant-image-img) {
  height: 148px;
}
</style>
